<template>
  <view class="recommend_box">
    <scroll-view
      scroll-y
      class="recommend-view"
      @scrolltolower="handleToLower"
      lower-threshold="100"
    >
      <view class="recommend">
        <image
          v-for="item in recommendList"
          :key="item.id"
          :src="item.image_src"
          mode="aspectFill"
        >
        </image>
      </view>
      <view class="date-recommend">
        <view class="date-top">
          <view class="title-info">
            <view class="date-num">
              30 <text class="month"> / 12月</text>
            </view>
            <view class="title-text">花儿与少年</view>
          </view>
          <view class="more">更多 ></view>
        </view>
        <view class="date-content">
          <image
            mode="aspectFill"
            v-for="item in dateImageList"
            :key="item.id"
            :src="item.imgUrl"
          >
          </image>
        </view>
      </view>
      <view class="hot-recommend">
        <view class="hot-top"> 热门 </view>
        <view class="hot-list">
          <view class="hot-item" v-for="item in hotImageList" :key="item.id">
            <image :src="item.imgUrl" mode="aspectFill"></image>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      recommendList: [],
      dateImageList: [],
      hotImageList: [],
      hasMore: true,
      controllerLoading: true,
    };
  },
  methods: {
    async getRecommendList() {
      const { data: res } = await uni.$http.get(
        "/api/public/v1/home/swiperdata"
      );
      if (res.meta.status != 200) {
        return;
      }
      this.recommendList = res.message;
      this.recommendList.push(this.recommendList[0]);
    },
    async getDateImageList() {
      for (let i = 0; i < 6; i++) {
        this.dateImageList.push({
          id: i,
          imgUrl: "/static/image/1.jpg",
        });
      }
    },
    async getHotImageList() {
      var curTotal = this.hotImageList.length;
      await uni.showLoading({
        title: "正在加载数据",
      });
      this.controllerLoading = false; // 表示loading效果正在播放
      for (let i = curTotal; i <= curTotal + 10 && i <= 50; i++) {
        this.hotImageList.push({
          id: i,
          imgUrl: "/static/image/2.jpg",
        });
      }
      setTimeout(async () => {
        await uni.hideLoading();
        this.controllerLoading = true; // 表示loading效果结束了
      }, 500);
      if (curTotal >= 50) {
        this.hasMore = false;
      }
    },
    handleToLower() {
      if (this.hasMore && this.controllerLoading) {
        this.getHotImageList();
        return;
      }
      if (this.controllerLoading) {
        // 如果loading 效果存在则不能再次申请数据
        uni.$showMsg();
      }
    },
  },
  mounted() {
    this.getRecommendList();
    this.getDateImageList();
    this.getHotImageList();
  },
};
</script>

<style lang="scss" scoped>
.recommend-view {
  height: calc(100vh - 36rpx);
}
.recommend {
  display: flex;
  flex-wrap: wrap;

  image {
    width: 50%;
    height: 200rpx;
    border-right: 10rpx solid #fff;
    border-bottom: 10rpx solid #fff;
  }

  image:nth-of-type(2n) {
    border-right: 0;
  }
}

.date-recommend {
  margin-top: 30rpx;
  .date-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10rpx;
    .title-info {
      display: flex;
      align-items: center;
      .date-num {
        color: $themeColor;
        font-weight: 700;
        font-size: 50rpx;
        text.month {
          font-size: 35rpx;
        }
      }
      .title-text {
        margin-left: 20rpx;
        font-size: 38rpx;
        font-weight: 600;
        color: #3d3d3d;
        text-align: left;
      }
    }

    .more {
      font-size: 30rpx;
      font-weight: 500;
      color: #636363;
    }
  }

  .date-content {
    display: flex;
    flex-wrap: wrap;

    image {
      width: 33.33%;
      border-right: 4rpx solid #fff;
      border-bottom: 4rpx solid #fff;
    }

    image:nth-of-type(3n) {
      border-right: 0;
    }
  }
}

.hot-recommend {
  margin-top: 30rpx;

  .hot-top {
    border-left: 20rpx solid $themeColor;
    padding-left: 5rpx;
    font-size: 35rpx;
    font-weight: 700;
  }

  .hot-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;
    .hot-item {
      width: 33.33%;
      border-right: 4rpx solid #fff;
      border-bottom: 4rpx solid #fff;
      image {
      }
    }

    .hot-item:nth-of-type(3n) {
      border-right: 0;
    }
  }
}
</style>
